<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>评论</title>
    <link
      rel="stylesheet"
      href="../../static/css/iconfont01.css"
      th:href="@{/static/css/iconfont01.css}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="../../static/customAlertConfirm/customAlertConfirm.css"
      th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
    />
    <link
      rel="stylesheet"
      th:href="@{/static/css/replymask.css}"
      type="text/css"
      href="../../static/css/replymask.css"
    />
    <link
      href="../../static/css/common.css"
      rel="stylesheet"
      th:href="@{/static/css/common.css}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="../../static/css/publishBlog.css"
      th:href="@{/static/css/publishBlog.css}"
    />
    <link
      href="../../static/css/message.css"
      rel="stylesheet"
      th:href="@{/static/css/message.css}"
      type="text/css"
    />
  </head>
  <body>
  <div th:replace="~{hot::#model}"></div>
    <div th:replace="~{unlogin::mask}"></div>
    <div class="top" th:fragment="message-top">
      <div id="top">
        <!-- logo -->
        <div id="logo-search">
          <div class="logo">
            <img
              src="../../static/img/logo.png"
              th:src="@{/static/img/logo.jpg}"
              alt=""
            />
          </div>
          <div class="top-search" th:replace="~{home::topSearch}">
            <span><i class="iconfont">&#xe623;</i></span>
            <input type="text" placeholder="请输入搜索内容" id="top-input" />
          </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn" th:fragment="messageFn">
          <div class="home fn">
            <a
              class="icon"
              href="home.html"
              th:href="@{/blog/getMyConnectionBlog(msg='登录成功')}"
              ><i class="iconfont">&#xe625;</i></a
            >
          </div>
          <div class="hot fn">
            <a
              class="icon"
              href="hot.html"
              th:href="@{/blog/getIndexBlog(state=2)}"
              ><i class="iconfont">&#xe628;</i></a
            >
          </div>
          <div class="message border fn">
            <a
              class="icon"
              href="message.html"
              th:href="@{/message}"
              ><i class="iconfont">&#xe908;</i></a
            >
          </div>
          <div class="private fn">
            <a
              class="icon"
              href="personalPage.html"
              th:href="@{/my/toMyInfo}"
              ><i class="iconfont">&#xe60a;</i></a
            >
          </div>
        </div>
        <!-- 登录，设置等-->
        <div class="access" th:replace="~{home::access}">
          <div class="setting">
            <button class="top-setting-btn">
              <i class="iconfont">&#xe645; </i>
            </button>
            <div class="setting-list">
              <a>个人中心</a>
              <a>账号修改</a>
              <div>退出</div>
            </div>
          </div>

          <div class="setting">
            <button class="top-pattern-btn">
              <i class="iconfont">&#xe6d9;</i>
            </button>
          </div>
          <div class="setting">
            <button class="top-publish-btn">
              <i class="iconfont">&#xe61d; </i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div th:replace="~{home::publishBlogBox}"></div>
    <div id="content">
      <div class="list">
        <p>消息</p>
        <ul>
          <a th:if="${color}" th:href="@{/user/getOthersCommentOfMe}">
            <span><i class="iconfont">&#xe638;</i></span>
            评论
          </a>
          <a th:unless="${color}" th:href="@{/user/getOthersCommentOfMe}" th:classappend="color">
            <span><i class="iconfont">&#xe638;</i></span>
            评论
          </a>
          <a th:href="@{/user/getOthersLikeOfMe}">
            <span><i class="iconfont">&#xe62b;</i></span>
            赞
          </a>
          <a th:href="@{/my/getReportForUser}">
            <span><i class="iconfont">&#xe6b0;</i></span
            >违规通知</a
          >
        </ul>
      </div>
      <div id="news">
        <div th:if="${color}" class="news message" id="message-news"  th:uid="${blog.uid}" th:bid="${blog.id}" th:each="blog:${auditBlog}">

            <div class="news-top">
              <a
                      th:href="@{/user/toOnesInfo(id=${blog.uid})}"
                      class="head-link"
              >
                <div class="head">
                  <img
                          src="../../static/img/banner.jpg"
                          th:src="@{${blog.userAvatarUrl}}"
                          alt=""
                  />
                </div>
              </a>
              <div class="top-details">
                <a href="" class="name">
                  <p th:text="${blog.username}">XXX</p>
                </a>
                <p class="time" th:text="${blog.time}">3-18</p>
              </div>
              <div class="top-attention">
                <button class="top-attention-btn">
                  <i class="iconfont">&#xe7df;</i>关注
                </button>
              </div>
              <div class="report-remove">
                <div
                        class="rm-icon"
                        th:bid="${blog.id}"
                        th:otherid="${blog.uid}"
                        onclick="reportfn(this)"
                >
                  <i class="iconfont">&#xe62e;</i>
                </div>
                <ul class="rm-detials hidden">
                  <li
                          class="tip-off-li"
                          th:bid="${blog.id}"
                          onclick="tipOffFn(this)"
                  >
                    投诉
                  </li>
                  <li
                          class="remove-li"
                          th:bid="${blog.id}"
                          onclick="removeBlog(this)"
                  >
                    删除
                  </li>
                </ul>
              </div>
            </div>
            <div class="news-container">
              <div class="container">
                <a class="color" th:href="@{/blog/skipToBlog(label=${blog.label})}" th:text="'#'+${blog.label}+'#'"></a>&nbsp;&nbsp;<span class="container-text" th:text="${blog.text}"></span>

                <span class="collapse">收起</span>
              </div>

              <div class="news-content">
                <div class="news-content-img" th:each="img:${blog.pictureUrl}">
                  <img
                          th:src="@{${img}}"
                          src="../../static/img/logo.jpg"
                          alt=""
                          onclick="showModel(this)"
                  />
                </div>
              </div>
            </div>
            <!-- 底部博文功能 -->
            <div class="foot">
              <div class="share">
                <i class="iconfont">&#xe62f;</i>
                <span
                        th:text="${blog.transmit}&gt;0?${blog.transmit}:'分享'"
                >12</span
                >
              </div>
              <div class="assess" th:bid="${blog.id}">
                <i class="iconfont">&#xe695;</i>
                <span th:text="${blog.comment}&gt;0?${blog.comment}:'评论'"
                >12</span
                >
              </div>
              <div class="store">
                <i class="iconfont">&#xe647;</i>
                <span>收藏</span>
              </div>
              <div class="like">
                <i class="iconfont">&#xe62b;</i>
                <span th:text="${blog.likes}&gt;0?${blog.likes}:'点赞'"
                >12</span
                >
              </div>
            </div>
            <!-- 点击评论展开评论信息 -->
            <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
              <span class="comment-ddl">还可输入140字</span>
              <button class="comment-btn disable" th:bid="${blog.id}">评论</button>
              <!-- 评论 -->
              <div class="comment">
                <!-- 一级评论 -->
                <!--              <div class="item1">-->
                <!--                <div class="comment-list">-->
                <!--                  <a href="">-->
                <!--                    <div class="comment-head">-->
                <!--                      <img-->
                <!--                        src="../../static/img/banner.jpg"-->
                <!--                        th:src="@{/static/img/banner.jpg}"-->
                <!--                        alt=""-->
                <!--                      />-->
                <!--                    </div>-->
                <!--                  </a>-->
                <!--                  <div class="comment-details">-->
                <!--                    <a href="" class="comment-name"> <span>XXX</span> </a>:-->
                <!--                    <span class="c-content">今天天气真好1</span>-->
                <!--                    <div class="comment-bottom">-->
                <!--                      <div class="c-time">3-18</div>-->
                <!--                      <div class="comment-fn">-->
                <!--                        <div class="c-complain">-->
                <!--                          <i class="iconfont">&#xe6a9;</i>-->
                <!--                        </div>-->
                <!--                        <div class="reply">-->
                <!--                          <i class="iconfont">&#xe695;</i>-->
                <!--                        </div>-->
                <!--                        <div class="c-like">-->
                <!--                          <i class="iconfont">&#xe600;</i>-->
                <!--                          12-->
                <!--                        </div>-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 二级评论 &ndash;&gt;-->
                <!--                <div class="list2">-->
                <!--                  <div class="list2-bar"></div>-->
                <!--                  <div class="list2-details">-->
                <!--                    <a href="" class="list2-name"><span>XXX:</span></a>-->
                <!--                    <span class="list2-content">1111111111</span>-->
                <!--                  </div>-->
                <!--                  <div class="list2-bottom">-->
                <!--                    <div class="list2-time">3-18</div>-->
                <!--                  </div>-->
                <!--                </div>-->

                <!--                <div class="list2">-->
                <!--                  <a class="more-reply"-->
                <!--                    >共2条回复-->
                <!--                    <i class="iconfont">&#xe62e;</i>-->
                <!--                  </a>-->
                <!--                </div>-->
                <!--              </div>-->
                <!-- 二级评论 -->
              </div>


            </div>
          </div>
        <div class="news" th:unless="${color}"    th:each="comment:${list}" th:uid="${comment.userId} ">
        <div class="news-top">
          <a
                  href="../js/"
                  th:href="@{/user/toOnesInfo(id=${comment.userId})}"
                  class="head-link"
          >
            <div class="head">
              <img th:src="${comment.othersInfo.avatarUrl}" alt="" />
            </div>
          </a>
          <div class="top-details">
            <a href="" class="name">
              <p th:text="${comment.othersInfo.username}">XXX</p>
            </a>
            <p
                    class="time"
                    th:text="|${comment.commentTime}  ${comment.othersInfo.address}|"
            >
              3-18
            </p>
          </div>
        </div>
        <div class="message-content" th:if="${comment.state}==0">
          <p th:text="${comment.otherCommentText}">评论</p>
        </div>
        <div class="message-content" th:if="${comment.state}==1">
          <p>
            回复
            <a class="color" th:text="|'@'${comment.myInfo.username}|"></a
            >:<span th:text="${comment.otherCommentText}"></span>
          </p>
        </div>
        <a class="message-container" th:href="@{/blog/skipInEnvelope(id=${comment.blogId})}" th:if="${comment.state}==0">
          <div class="message-content-img">
            <img
                    th:if="${comment.blogUrl}"
                    th:src="@{${comment.blogUrl}}"
                    alt=""
            />
            <img
                    th:unless="${comment.blogUrl}"
                    th:src="@{${comment.myInfo.avatarUrl}}"
                    alt=""
            />
          </div>
          <div class="message-content-text">
            <p>
                <span>@</span
                ><span th:text="${comment.myInfo.username}">XXX</span>
            </p>
            <p th:text="${comment.blogText}" class="news-content-blog"></p>
          </div>
        </a>
        <div class="message-container-box" th:if="${comment.state}==1">
          <div class="message-container-item1">@XXX:5555</div>
          <a class="message-container" th:href="@{/blog/skipInEnvelope(id=${comment.blogId})}">
            <div class="message-content-img">
              <img th:if="${comment.url}" th:src="@{${comment.url}}" alt="" />
              <img
                      th:unless="${comment.blogUrl}"
                      th:src="@{${comment.myInfo.avatarUrl}}"
                      alt=""
              />
            </div>
            <div class="message-content-text">
              <p>
                  <span>@</span
                  ><span th:text="${comment.myInfo.username}">XXX</span>
              </p>
              <p th:text="${comment.blogText}" class="messageS-content-blog"></p>
            </div>
          </a>
        </div>
        <div class="foot" th:if="${comment.state}==0">
          <div class="reply" th:cid="${comment.commentId}">
            <i class="iconfont">&#xe695;</i>
            <span class="rep">回复</span>
          </div>
          <div
                  class="likeComment"
                  th:cid="${comment.commentId}"
                  onclick="likeComment(this)"
          >
            <i class="iconfont">&#xe62b;</i>
          </div>
        </div>
        <div class="foot" th:if="${comment.state}==1">
          <div
                  class="likeComment"
                  th:cid="${comment.commentId}"
                  onclick="likeComment(this)"
          >
            <i class="iconfont">&#xe62b;</i>
          </div>
        </div>
      </div>
        </div>
      <div id="right-bar" th:replace="~{hot-search::#right-bar}">
        <div id="hot">
          <div class="hot-top">
            <div class="hot-top-content"><p>热搜</p></div>
            <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
          </div>
        </div>
        <a class="return-top" href="#">
          <i class="iconfont">&#xea7d;</i>
        </a>
      </div>
    </div>
  </body>
  <script
    type="text/javascript"
    src="../../static/js/jquery3.7.1.min.js"
    th:src="@{/static/js/jquery3.7.1.min.js}"
  ></script>
  <script
    type="text/javascript"
    src="../../static/js/personalPage-publish.js"
    th:src="@{/static/js/personalPage-publish.js}"
  ></script>
  <script
    type="text/javascript"
    src="../../static/customAlertConfirm/customAlertConfirm.js"
    th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
  ></script>
  <script
    src="../../static/js/replymask.js"
    type="text/javascript"
    th:src="@{/static/js/replymask.js}"
  ></script>
  <script

    type="text/javascript"
    th:src="@{/static/js/message.js}"
  ></script>
  <script th:src="@{/static/js/common.js}"></script>

  <script th:src="@{/static/js/loadComment.js}"></script>

  <script th:src="@{/static/js/hot-search.js}"></script>
  <script  th:src="@{/static/js/blogDetails.js}"></script>
  <script th:inline="javascript">
    let alnews=document.getElementsByClassName("news");

    if(alnews.length==0){
      document.querySelector("#news").innerHTML=`<div class="news empty">暂无数据</div>`
    }

  </script>

</html>
